<!--20210304  zaq  创建vue文件-->
<!--20210310  zaq  实现具体界面-->
<!--20210324  zaq  user值由父组件传递，更新修改方法-->
<!--20210421  zaq  新增修改密码界面-->
<!--20210519  zaq  调试修改个人信息-->
<!--20210520  zaq  修改界面显示，调试完成-->
<!--20210521  zaq  增加载入画面-->

<template>
<!--修改用户信息-->
<!--  注：用户名不可更改-->

  <div class="update_user">、
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!--  修改用户信息-->
      <el-tab-pane label="个人信息" name="first">
        <el-form v-model="newUser"
                 label-width="100px"
        >
        <el-form-item label="登录名:">
          <el-input
              placeholder="登录名"
              v-model="newUser.uLogin"
              :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="昵称:">
          <el-input
              placeholder="昵称"
              v-model="newUser.uName"
              maxlength="20"
              show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="小星球:">
          <el-input
              placeholder="小星球"
              v-model="newUser.uPlanet"
              maxlength="20"
              show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="创建日期:">
          <el-input
              placeholder="创建日期"
              v-model="newUser.uCreatedate"
              :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="生日:">
          <el-date-picker
              v-model="newUser.uBirthday"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="性别:">
          <el-radio-group v-model="newUser.uSex">
            <el-radio-button label="男" text="2" value=2></el-radio-button>
            <el-radio-button label="女" text="1" value=1></el-radio-button>
            <el-radio-button label="保密" text="3" value=3></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个性签名:">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="newUser.uStatus"
              maxlength="50"
              show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button  @click="update_user(newUser)">保存修改</el-button>
          <el-button @click="old_user(userRef)">取消</el-button>
          <el-button @click="getUser" >获得信息失败？点击重试</el-button>
        </el-form-item>
      </el-form>
      </el-tab-pane>

<!--      修改密码-->
      <el-tab-pane label="修改密码" name="second">
        <update-pwd
        ></update-pwd>
      </el-tab-pane>

      <el-tab-pane label="销户" name="third">
        <div style="width: 100%;text-align: center">
          <span style="color: #dd6161;font-size: 20px">
            用户将永久销户，不可再登录本系统，是否注销
          </span>
          <el-button @click="deleteUser">确定</el-button>
        </div>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import Update_pwd from "./Update_pwd";
import moment from "moment";
import {update_11301} from "../../api";
import { ElMessage } from 'element-plus';
import {getUser_0000} from "../../api";
import {delete_11401} from "../../api";

export default {
  name: "Update_user",
  computed: {
  },
  props:{
    // user:{
    //   code:-1,
    //   note:'',
    //   uId:-1,//用户id
    //   uLogin:'',//用户名
    //   uName:'',//用户昵称
    //   uPwd:'',//密码
    //   uPlanet:'',//小星球名字
    //   uCreatedate:0,//用户创建日期
    //   uBirthday:0,//生日
    //   uSex:'保密',//性别
    //   uStatus:'',//个性签名
    //   uAdmin:0,//管理员标志
    //   delete:0//删除标志
    // },
  },
  components:{
    'update-pwd':Update_pwd,//修改密码
  },
  data(){
    return{
      activeName:'first',
      userRef:'',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },//生日选择
      newUser:{
        code:-1,
        note:'',
        uId:1,//用户id
        uLogin:'',//用户名
        uName:'',//用户昵称
        uPwd:'',//密码
        uPlanet:'',//小星球名字
        uCreatedate:0,//用户创建日期
        uBirthday:0,//生日
        uSex:'保密',//性别
        uStatus:'',//个性签名
        uAdmin:0,//管理员标志
        delete:0//删除标志
      }//用户信息
    }

  },
  methods:{
    deleteUser(){
      var body={
        uId:sessionStorage.getItem('uId'),
        uAdmin:sessionStorage.getItem("admin")
      }
      if(body.uAdmin==1){

      }else{
        delete_11401(body).then(resp=>{
          if(resp.code>0){
            //销户成功，退出登录
            ElMessage.warning({
              message: '销户成功',
              type: 'success'
            });
            // 退出
            sessionStorage.setItem("uId",null)
            this.$store.commit("userStatus",null,null)
            this.$router.push('/')
          }else {
            ElMessage.warning({
              message: '销户失败：'+resp.note,
              type: 'error'
            });
          }
        }).catch(err=>{
          ElMessage.warning({
            message: '调用接口失败：'+err,
            type: 'error'
          });
        })
      }

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    getUser(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0)'
      });
      const _this=this
      console.log("getUser被调用")
      let user = {
        code: -1,
        note: '',
        uId: -1,//用户id
        uLogin: '',//用户名
        uName: '',//用户昵称
        uPwd: '',//密码
        uPlanet: '',//小星球名字
        uCreatedate: 0,//用户创建日期
        uBirthday: 0,//生日
        uSex: '保密',//性别
        uStatus: '',//个性签名
        uAdmin: 0,//管理员标志
        delete: 0//删除标志
      }
      let isLogin=this.$store.getters.isLogin
      let uId=sessionStorage.getItem("uId")

      console.log("isLogin1:"+isLogin)
      console.log("uId1:"+uId)
      if(isLogin){
        //获得用户信息
        user.uId=uId

        console.log("getUser_0000被调用")
        getUser_0000(user).then(resp => {
          console.log("getUser_0000正在调用，code："+resp.uBirthday)
          //日期转换
          var date=null
          if(resp.uBirthday!=null){
            var str=resp.uBirthday.toString()
            var yyyy=str.substr(0,4)
            var mm=str.substr(4,2)
            var dd=str.substr(6,2)
            var str2=''+yyyy+'-'+mm+'-'+dd
            date= new Date(str2)
          }


          str=resp.uCreatedate.toString()
          yyyy=str.substr(0,4)
          mm=str.substr(4,2)
          dd=str.substr(6,2)
          var create=''+yyyy+'-'+mm+'-'+dd
          console.log("date:"+date)
          if (resp.code > 0) {
            user={
              code: resp.code,
              note: resp.note,
              uId: resp.uId,//用户id
              uLogin: resp.uLogin,//用户名
              uName: resp.uName,//用户昵称
              uPwd: '',//密码
              uPlanet: resp.uPlanet,//小星球名字
              uCreatedate: create,//用户创建日期
              uBirthday: date,//生日
              uSex: resp.uSex,//性别
              uStatus: resp.uStatus,//个性签名
              uAdmin: 0,//管理员标志
              delete: 0//删除标志
            }
            console.log('user2:'+user.Birthday)
            // _this.user = user
            _this.newUser = user
          } else {
            // ElMessage.error('获取用户信息失败，请刷新重试');
          }
        }).catch(error => {
          ElMessage.error('调用接口获取用户信息失败：' + error);
        });
      }else {
        ElMessage.error('用户未登录,请注销重试');
      }
      console.log("getUser调用结束,user:"+_this.newUser.uName)
      loading.close()
    },
    update_user(form){
      //修改日期格式
      const _this=this;
      var uDate=moment(form.uBirthday).format('yyyyMMDD');
      var create=moment(form.uCreatedate).format('yyyyMMDD');
      form.uBirthday=parseInt(uDate)
      form.uCreatedate=parseInt(create)

      //修改性别格式
      if(form.uSex=='女'){
        form.uSex=1
      }else if(form.uSex=='男'){
        form.uSex=2
      }else{
        form.uSex=3
      }

      //传递给后端更新用户信息
      update_11301(form).then(resp=>{
        if (resp.code > 0) {
          //成功
          this.$emit('updateUser',form)
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getUser()
        } else {
          ElMessage.error('修改失败:'+resp.note);
        }
      }).catch(error => {
        console.log('调用接口获取用户信息失败：' + error);
      });

    },//修改用户信息

    old_user(oldUser){
    },//取消修改，还原用户信息
  },
  mounted() {
    this.getUser()
  },//初始化
  // created() {
  //   // 组件实例化完毕，但页面还未显示,接收上个页面传过来的参数
  // }
}
</script>

<style scoped>
.update_user{
  text-align: left;
  width: 500px;
}
</style>